<template>
  <div class="gl_contentBox gl_heightFull">
    <div v-if="flag" class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>课程名称</p>
          <el-select v-model="Api_GET_ClubCheckInLogStudentCheckInLogListQO.CourseName" size="mini" clearable placeholder="请选择课程" filterable @change="getStudent()">
            <el-option v-for="(item, index) in courseList" :key="index" :value="item.name" :label="item._showName" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>所属班级</p>
          <el-select v-model="Api_GET_ClubCheckInLogStudentCheckInLogListQO.ClassName" size="mini" clearable placeholder="请选择班级" filterable @change="getStudent()">
            <el-option v-for="(item, index) in classList" :key="index" :value="item.name" :label="item._showName" />
          </el-select>
        </el-col>
        <el-col :span="5.5">
          <p>考勤日期</p>
          <el-date-picker v-model="freeDay" type="daterange" range-separator="至" start-placeholder="请选择日期" end-placeholder="请选择日期" size="mini" value-format="yyyy-MM-dd" style="width:100%" @change="changeAttendance" />
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary" style="margin-top:25px" size="mini" @click="getStudent()">筛选</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="warning" style="margin-top:25px" size="mini" :loading="btnUpLoading" @click="exportstudent()">导出数据</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="flag" style="margin-top:20px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="100" />
        <el-table-column label="学员" prop="studentName" />
        <el-table-column label="课程名称" prop="courseSchedule.courseName" />
        <el-table-column label="所属班级" prop="courseSchedule.className" />
        <el-table-column label="考勤人" prop="employee.name" />
        <el-table-column label="上课时间">
          <template slot-scope="{ row }">
            <span v-if="row.courseSchedule.courseDate">
              {{ row.courseSchedule.courseDate | FormatDate('yyyy-MM-dd') }}
            </span>
            <span>
              {{ 10 > row.courseSchedule.startHour ? '0' + row.courseSchedule.startHour : row.courseSchedule.startHour }}:{{ 10 > row.courseSchedule.startMinute ? '0' + row.courseSchedule.startMinute : row.courseSchedule.startMinute }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="考勤时间" min-width="120">
          <template slot-scope="{ row }">
            <span v-if="row.checkInTime">
              {{ row.checkInTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            <span v-if="row.checkInStatus">
              {{ row.checkInStatus.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="实扣课时" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.CheckInTime">
              {{ row.usedClassPeriod }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" style="color:#1990FF" @click="check(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑考勤 -->
    <el-dialog
      title="编辑点名状态"
      class="gl_dialog_TitleLine gl_dl_footer card"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="632px"
      top="25vh"
    >
      <el-scrollbar>
        <el-form ref="refForm" class="gl_form_mini" :model="UpdateCheckInLogInput" size="small" label-width="80px">
          <el-form-item label="学员">
            {{ studentName }}
          </el-form-item>
          <el-form-item
            label="到课状态"
            prop="checkInStatusCode"
            :rules="[
              { required: true, message: '请输入', trigger: 'blur' }
            ]"
          >
            <el-select v-model="UpdateCheckInLogInput.checkInStatusCode" style="width: 100%" placeholder="请选择到课状态">
              <el-option
                v-for="item in dict.checkInStatus"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="应扣课时">
            {{ usedClassPeriod }}
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="UpdateCheckInLogInput.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">取消</el-button>
        <el-button type="primary" :loading="submitLoading" size="mini" @click="submit('refForm')">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCheckInLogStudentCheckInLogListQO.Page"
        :page-size="Api_GET_ClubCheckInLogStudentCheckInLogListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { mapState, mapActions } from 'vuex';
import { api_GET_ClubCheckInLogStudentCheckInLogList, api_GET_ClubClass, api_GET_ClubCourse, api_PUT_ClubCheckInLogId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCheckInLogStudentCheckInLogListQO, Api_GET_ClubClassQO, UpdateCheckInLogInput } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      btnUpLoading: false,
      GetStudentInput: {},
      studentid: '',
      submitLoading: false,
      studentName: '',
      usedClassPeriod: '',
      UpdateCheckInLogInput: new UpdateCheckInLogInput(),
      freeDay: [],
      courseList: [],
      classList: [],
      Api_GET_ClubClassQO: new Api_GET_ClubClassQO(),
      totalPage: 0,
      currentPage: 1,
      Api_GET_ClubCheckInLogStudentCheckInLogListQO: new Api_GET_ClubCheckInLogStudentCheckInLogListQO(),
      dialogVisible: false,
      paymentTime: [],
      flag: true,
      tableData: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    freeDay: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length !== 0) {
          this.changeProportion(val);
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getStudent();
    this.getClass();
    this.getCourse();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取时间
    changeProportion(val) {
      console.log(val);
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.StartDateTime = val[0];
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.EndDateTime = val[1];
      this.GetStudentInput.StartDateTime = val[0] + '';
      this.GetStudentInput.EndDateTime = val[1] + '';
      this.getStudent();
    },
    check(row) {
      console.log(row);
      this.studentid = row.id;
      this.studentName = row.studentName;
      this.usedClassPeriod = row.courseSchedule.courseAmount;
      this.dialogVisible = true;
      this.UpdateCheckInLogInput.checkInStatusCode = row.checkInStatusCode;
      this.UpdateCheckInLogInput.remark = row.remark;
    },
    getStudent(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.StudentId = this.$route.query.id;
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.Page = page || 1;
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.SkipCount = (this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.Page - 1) * this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.MaxResultCount;
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.IncludeCourse = true; // type: boolean
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.IncludeClass = true; // type: boolean
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.IncludeEmployee = true; // type: boolean
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.IncludeCheckInStatus = true; // type: boolean
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.IncludeDeleted = true; // type: boolean
      api_GET_ClubCheckInLogStudentCheckInLogList(this.Api_GET_ClubCheckInLogStudentCheckInLogListQO).then(res => {
        console.log(res);
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取班级列表
    getClass () {
      api_GET_ClubClass()
        .then(
          res => {
            const _list = res.items || [];
            _list.forEach(item => {
              item._showName = item.name;
            });
            _list.unshift({
              name: '',
              _showName: '全部'
            });
            this.classList = _list;
          }
        );
    },
    // 获取课程列表
    getCourse () {
      api_GET_ClubCourse()
        .then(
          res => {
            const _list = res.items || [];
            _list.forEach(item => {
              item._showName = item.name;
            });
            _list.unshift({
              name: '',
              _showName: '全部'
            });
            this.courseList = _list;
          }
        );
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.MaxResultCount = MaxResultCount;
      this.getStudent();
    },
    pageIndexChange(currentPage) {
      this.getStudent(currentPage);
    },
    close() {
      this.dialogVisible = false;
    },
    submit(formName) {
      console.log(this.UpdateCheckInLogInput);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          api_PUT_ClubCheckInLogId(this.studentid, this.UpdateCheckInLogInput).then(res => {
            this.$message({
              message: '编辑成功',
              type: 'success'
            });
            this.dialogVisible = false;
            this.submitLoading = false;
            this.getStudent();
          }, error => {
            this.submitLoading = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
            this.getStudent();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 切换考勤日期
    changeAttendance (val) {
      const _start = val ? val[0] : null;
      const _end = val ? val[1] : null;
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.StartDateTime = _start;
      this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.EndDateTime = _end;
      this.GetStudentInput.StartDateTime = _start;
      this.GetStudentInput.EndDateTime = _end;
      this.getStudent();
    },
    exportstudent() {
      this.GetStudentInput.CourseName = this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.CourseName;
      this.GetStudentInput.ClassName = this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.ClassName;
      this.GetStudentInput.IncludeCourse = true; // type: boolean
      this.GetStudentInput.IncludeClass = true; // type: boolean
      this.GetStudentInput.IncludeEmployee = true; // type: boolean
      this.GetStudentInput.IncludeCheckInStatus = true; // type: boolean
      this.GetStudentInput.Sorting = this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.Sorting;
      this.GetStudentInput.StudentId = this.$route.query.id;
      this.GetStudentInput.Page = this.Api_GET_ClubCheckInLogStudentCheckInLogListQO.Page;
      this.GetStudentInput.IncludeDeleted = true;
      this.GetStudentInput = JSON.stringify(this.GetStudentInput);
      var that = this;
      that.btnUpLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '考勤详情' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'AttendanceDetail', GetStudentCheckInLogInput: this.GetStudentInput }, WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE).then(res => {
        that.btnUpLoading = false;
        this.GetStudentInput = {};
      }).catch(error => {
        that.btnUpLoading = false;
        this.GetStudentInput = {};
        errorText(error).then(function(text) {
          this.GetStudentInput = {};
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }

};
</script>

<style>

</style>
